<template>
	<swiper 
		class="swiper"
		:current="currentIndex"
		@change="changeSwiper"
		circular="true"
		duration="100"
	>
		<swiper-item class="swiper_item" v-for="(item,index) of 4" :key="index">
			<swiper-item-list :catalog="catalog" :sort="sort" :tabIndex="index" :currentIndex="currentIndex"></swiper-item-list>
		</swiper-item>
	</swiper>
</template>

<script>
import SwiperItemList from './Swiper-item-list.vue'
export default {
  components: {
    SwiperItemList
  },
  data () {
    return {
      currentIndex: 0,
			catalog: '',
			sort: 'created'
    }
  },
	created () {
	  uni.$on('giveTabInfo', this.getTabInfo)
	  uni.$on('giveSort', this.getSort)
	},
	beforeDestroy () {
	  uni.$off('giveTabInfo', this.getTabInfo)
	  uni.$off('giveSort', this.getSort)
	},
  methods: {
    getTabInfo ({ catalog, index }) {
      this.catalog = catalog
      this.currentIndex = index
    },
    getSort (sort) {
      this.sort = sort
    },
    changeSwiper (e) {
      const { current } = e.detail
			this.currentIndex = current
      switch (current) {
        case 0:
          this.catalog = ''
          break
        case 1:
          this.catalog = 'share'
          break
        case 2:
          this.catalog = 'ask'
          break
        case 3:
          this.catalog = 'notice'
          break
      }
      uni.$emit('giveSwiperIndex', current)
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper{
	/* #ifdef H5 || MP-WEIXIN */
		height: 100%;
	/* #endif */
	/* #ifdef APP-NVUE */
	flex: 1;
	/* #endif */
	&_item{
		/* #ifndef APP-NVUE */
			display: block;
		/* #endif */
	}
}

</style>